<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">点击</button>
</body>
<script>
    // 计时器: 每隔固定时间,执行传入的函数  => 只要不清除计时器,一直执行
    // 延时器: 延迟一定的时间,执行传入的函数  => 只执行一次就结束了

    // 设置延时器
    // setTimeout(fn,timeout,arg1,arg2...argN)
    // fn     需要执行的函数
    // timeout  延迟的事件(ms)
    // arg1,arg2...argN   如果函数需要接收参数,从第三参数开始依次向后传

    // 返回值: 延时器的编号

    // 清除延时器
    // clearTimeout(延时器的编号)

    // 每隔5s启动5s的倒计时
    // 计时器嵌套计时器  => 外层计时器 不会 等待内层倒计时结束,而是等待间隔时间之后 直接启动下一个
    // var t1 = setInterval(function () {
    //     console.log("倒计时开启");
    //     var count = 5;
    //     console.log(count);
    //     var t2 = setInterval(function () {
    //         count--;
    //         console.log(count);
    //         if (count == 0) {
    //             clearInterval(t2);
    //         }

    //     }, 1000);
    // }, 2000);


    // 延时器改计时器 (递归)
    // var btn = document.getElementsByClassName("btn")[0];
    // var timer = null;

    // fn();

    // btn.onclick = function () {
    //     clearTimeout(timer);
    // }

    // function fn() {
    //     clearTimeout(timer);
    //     timer = setTimeout(function () {
    //         console.log(11111);
    //         fn();
    //     }, 1000);
    // }




    var t1 = null;
    function countDown() {
        clearTimeout(t1);
        t1 = setTimeout(function () {
            console.log("倒计时开启");
            var count = 5;
            console.log(count);
            var t2 = setInterval(function () {
                count--;
                console.log(count);
                if (count == 0) {
                    clearInterval(t2);
                    countDown(); // 等倒计时结束之后 ->再启动下一个
                }

            }, 1000);

            // countDown();  //不用等待计时器 而是直接启动下一个
        }, 2000);
    }

    countDown();












</script>

</html>